<template>
    <div>

        <el-dialog title="投诉建议详情" :visible.sync="dialogFormVisible" width="500px" >
            <el-form :model="form">
                <el-form-item label="客户姓名" label-width="90px">
                    <el-input v-model="form.ccName" autocomplete="off" placeholder="客户姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="90px">
                    <el-input v-model="form.ccEmail" autocomplete="off" placeholder="邮箱" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机" label-width="90px">
                    <el-input v-model="form.ccPhone" autocomplete="off" placeholder="手机" disabled></el-input>
                </el-form-item>
                <el-form-item label="类别" label-width="90px">
                    <el-input v-model="form.ccCategory" autocomplete="off" placeholder="类别" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容" label-width="90px">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="内容"
                            v-model="form.ccContext" disabled>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="发送邮件回复" :visible.sync="dialogFormVisible2" width="500px" >
            <el-form :model="reply">
                <el-form-item label="回复内容" label-width="90px">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="回复内容"
                            v-model="reply.content">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="sendReply">确 定</el-button>
            </div>
        </el-dialog>

        <el-table :data="dataList" border >
            <el-table-column
                    prop="ccName"
                    label="客户姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="ccEmail"
                    label="邮箱"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="ccPhone"
                    label="手机号"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="ccCategory"
                    label="类别"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="ccContext"
                    label="内容"
                    width="200"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="showDetails(scope.row)">查看详情</el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="showSend(scope.row)">邮件回复</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "Chart",
    mounted() {
        this.init();
    },
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisible2: false,
            dataList:[],
            form: {
                ccName: '',
                ccEmail: '',
                ccPhone: '',
                ccCategory: '',
                ccContext: ''
            },
            reply: {
                id:'',
                email:'',
                name:'',
                type:'',
                content:''
            }
        }
    },
    methods:{
        init(){
            let vm = this;
            this.axios({
                url: '/myapi/user/consultComplaint/list',
                method: 'get'
            }).then(function (response) {
                if(response.data.success===true){
                    vm.dataList = response.data.content;
                    console.log(vm.dataList);

                }
                else {
                    vm.$message.error('后端未知错误');
                }
            });
        },
        showDetails(row){
            this.form.ccName = row.ccName;
            this.form.ccEmail = row.ccEmail;
            this.form.ccPhone = row.ccPhone;
            this.form.ccCategory = row.ccCategory;
            this.form.ccContext = row.ccContext;
            this.dialogFormVisible = true;
        },
        showSend(row){
            console.log(row);
            this.reply.id = row.id;
            this.reply.email = row.ccEmail;
            this.reply.name = row.ccName;
            this.reply.type = row.ccCategory;
            this.reply.content = "";
            this.dialogFormVisible2 = true;
        },
        sendReply(){
            let vm = this;
            //axios
            this.axios({
                url: '/myapi/user/consultComplaint/sendEmail',
                method: 'post',
                data:{
                    id: vm.reply.id,
                    email: vm.reply.email,
                    name: vm.reply.name,
                    type: vm.reply.type,
                    content: vm.reply.content
                }
            }).then(function (response) {
                if(response.data.success===true){
                    vm.$message({
                        message: '回复成功!',
                        type: 'success'
                    });
                    vm.init();
                }
                else {
                    vm.$message.error('后端未知错误');
                }
            });
            vm.dialogFormVisible2 = false;
        }

    }
}
</script>

<style scoped>

</style>
